<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataJbfa } from "@/api/search";
import { addOrUpdateJbfa } from "@/api/addOrUpdate";
import { postJbfaTable } from "@/api/table";

const editorRef = shallowRef();
const editorRef1 = shallowRef();
const editorRef2 = shallowRef();
const editorRef3 = shallowRef();
const editorRef4 = shallowRef();
const editorRef5 = shallowRef();
const editorRef6 = shallowRef();
const editorRef7 = shallowRef();
const city = window.globalObj.name;
const valueHtml = ref(
  "<p>XX年，某某实现生产总值XX亿元，其中，第一产业增加值为XX亿元，第二产业增加值为XX亿元，第三产业增加值XX亿元。</p>"
);
const valueHtml1 = ref(
  `<p>${city}产业布局以油气采掘、绿色化工、现代大农业、汽车及装备制造为主。</p>`
);

const valueHtml2 = ref(
  `<p>${city}分布少数民族31个，其中超过千人的有满族、蒙古族、朝鲜族、回族和锡伯族。</p>`
);
const valueHtml3 = ref(
  `<p>某某是中国国家高速公路网北南方向主干线之一大广高速公路的七点，也是“龙江第一路”—哈大高速公路的终点。市区内北一快速路、南一快速路、世纪大道等城市主干道贯穿东西两个城区，萨大路、东干线、西干线等城市主干道贯穿南北两个城区。绥满高速（G10，全称绥芬河—满洲里高速公里），起于阿荣旗（黑蒙界），途径绥芬河、牡丹江、海林市、尚志市、哈尔滨市、肇东市、安达市、${city}、齐齐哈尔市、甘南县、内蒙古自治区呼伦贝尔市、牙克石市、满洲里市，全长约1527公里，全线采用双向四车道高速公路标准建设，${city}高速路段全长XX公里。大广高速（G45，全称：某某—广州高速公路），北起黑龙江省${city}，南至广东省广州市，途径吉林省、内蒙古自治区、北京市、河北省、河南省、湖北省、江西省、广东省9个省市，线路总长3437千米，为双向四至六车道加救援车道；大广高速公路黑龙江省段全线位于${city}境内，起点位于${city}萨尔图机场，途径某某区、某某区、某某区、某某区、某某县、某某县，终于某某县松花江大桥，顺接大广高速公路吉林松原段，全长148.4千米，红岗辖区路段约XX公里，公路由沥青（水泥）灌注铺设。</p>`
);
const valueHtml4 = ref(
  "<p>某某有XX条铁路线路和XX个火车站，分别为：滨洲铁路、通让铁路、哈齐高速铁路、XX以及某某站、某某东站、某某西站、XX。</p>"
);
const valueHtml5 = ref("<p>无。</p>");
const valueHtml6 = ref("<p>某某萨尔图机场稳定运行XX条航线，通航城市XX个。</p>");
const valueHtml7 = ref(
  `<p>（1）有利条件：${city}交通运输潜力资源丰富，公路线路XX条，公路桥梁XX条，大广高速、绥满高速贯穿全域，是任务部队过境重要战略通道。（2）不利因素：容易遭受打击地域和打击方式，一是打击高速公路立交桥处；二是使用穿甲弹、对路段实施多点间断式打击，阻碍部队机动，迟滞道路抢修；三是对高速公路沿途维修点、保交护路预设地点进行破坏，削减支援保障能力。</p>`
);

const toolbarConfig = {};
const editorConfig = {
  placeholder: "请输入内容...",
};
const toolbarConfig1 = {};
const toolbarConfig2 = {};
const toolbarConfig3 = {};
const toolbarConfig4 = {};
const toolbarConfig5 = {};
const toolbarConfig6 = {};
const toolbarConfig7 = {};
const mode = ref("default");
const mode1 = ref("default");
const mode2 = ref("default");
const mode3 = ref("default");
const mode4 = ref("default");
const mode5 = ref("default");
const mode6 = ref("default");
const mode7 = ref("default");
const editorRef10 = shallowRef();
const valueHtml10 = ref("人口分布");
const toolbarConfig10 = {};
const editorConfig10 = { placeholder: "请输入内容..." };
const mode10 = ref("default");
const handleCreated10 = (editor) => {
  editorRef10.value = editor; // 记录 editor 实例，重要！
};

// 加载html
const initHtml = () => {
  searchDataJbfa({ m: "情况判断结论-社会环境对我完成任务" }).then((res) => {
    if (res.code !== 200) return ElMessage.error(res.msg);
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "经济总量")?.v || "";
    valueHtml1.value = data.find((x) => x.k === "主要产业")?.v || "";
    valueHtml2.value = data.find((x) => x.k === "民族分布")?.v || "";
    valueHtml3.value = data.find((x) => x.k === "公路交通")?.v || "";
    valueHtml4.value = data.find((x) => x.k === "铁路交通")?.v || "";
    valueHtml5.value = data.find((x) => x.k === "水运交通")?.v || "";
    valueHtml6.value = data.find((x) => x.k === "航空运输")?.v || "";
    valueHtml7.value = data.find((x) => x.k === "社会环境利弊分析")?.v || "";
    valueHtml10.value = data.find((x) => x.k === "人口分布")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleCreated1 = (editor) => {
  editorRef1.value = editor; // 记录 editor 实例，重要！
};

const handleCreated2 = (editor) => {
  editorRef2.value = editor; // 记录 editor 实例，重要！
};
const handleCreated3 = (editor) => {
  editorRef3.value = editor; // 记录 editor 实例，重要！
};
const handleCreated4 = (editor) => {
  editorRef4.value = editor; // 记录 editor 实例，重要！
};
const handleCreated5 = (editor) => {
  editorRef5.value = editor; // 记录 editor 实例，重要！
};
const handleCreated6 = (editor) => {
  editorRef6.value = editor; // 记录 editor 实例，重要！
};
const handleCreated7 = (editor) => {
  editorRef7.value = editor; // 记录 editor 实例，重要！
};

// 保存
const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateJbfa({
      m: "情况判断结论-社会环境对我完成任务",
      data: [
        {
          k: "经济总量",
          v: valueHtml.value,
        },
        {
          k: "主要产业",
          v: valueHtml1.value,
        },
        {
          k: "民族分布",
          v: valueHtml2.value,
        },
        {
          k: "公路交通",
          v: valueHtml3.value,
        },
        {
          k: "铁路交通",
          v: valueHtml4.value,
        },
        {
          k: "水运交通",
          v: valueHtml5.value,
        },
        {
          k: "航空运输",
          v: valueHtml6.value,
        },
        {
          k: "社会环境利弊分析",
          v: valueHtml7.value,
        },
        {
          k: "人口分布",
          v: valueHtml10.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

// 行政区域、面积、人口统计表
const rkList = ref([]);
const getRkData = () => {
  return postJbfaTable("xzqymjrktjbList").then((res) => {
    if (res.code === 200) {
      rkList.value = res?.data || [];
    }
  });
};

onMounted(() => {
  initHtml();
  getRkData();
});

onBeforeUnmount(() => {
  const editor = editorRef.value;
  const editor1 = editorRef1.value;
  const editor2 = editorRef2.value;
  const editor3 = editorRef3.value;
  const editor4 = editorRef4.value;
  const editor5 = editorRef5.value;
  const editor6 = editorRef6.value;
  const editor7 = editorRef7.value;
  if (!editor) return;
  if (!editor1) return;
  if (!editor2) return;
  if (!editor3) return;
  if (!editor4) return;
  if (!editor5) return;
  if (!editor6) return;
  if (!editor7) return;
  editor.destroy();
  editor1.destroy();
  editor2.destroy();
  editor3.destroy();
  editor4.destroy();
  editor5.destroy();
  editor6.destroy();
  editor7.destroy();
  if (editorRef10.value) editorRef10.value.destroy();
});

// 表头单元格样式
const headerCellStyle = () => {
  return {
    backgroundColor: "#f5f7fa",
    color: "rgba(0,0,0,0.85)",
    fontSize: "14px",
    height: "54px",
  };
};
// 单元格样式
const cellStyle = () => {
  return {
    color: "rgba(0,0,0,0.65)",
    fontSize: "14px",
    lineHeight: "22px",
  };
};
</script>
<template>
  <div>
    <!-- <div class="top-15 zddj">
      {{
        city
      }}现辖萨尔图、让胡路、龙凤、红岗、大同5个区，某某、某某、某某和某某蒙古族自治县4个县，XX个乡镇，XX个街道，XX个社区，XX个村。总面积2.1万平方千米，常住人口XX万人。具体情况如下：
    </div> -->
    <FirstTitle name="人口分布" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef10"
        :defaultConfig="toolbarConfig10"
        :mode="mode10"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml10"
        :defaultConfig="editorConfig10"
        :mode="mode10"
        @onCreated="handleCreated10"
      />
    </div>

    <div class="top-15 zddj text-center">
      {{ city }}人口分布情况统计表（单位:人）
    </div>
    <el-table
      id="table"
      :data="rkList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
      max-height="500"
    >
      <el-table-column prop="data0" label="序号" width="60" align="center" />
      <el-table-column prop="data1" label="行政区域" />
      <el-table-column prop="data2" label="常住人口（人）" />
      <el-table-column prop="data3" label="城区常住人口（人）" />
      <el-table-column prop="data4" label="辖区面积（k㎡）" />
    </el-table>

    <FirstTitle name="经济总量" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <FirstTitle name="主要产业" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef1"
        :defaultConfig="toolbarConfig1"
        :mode="mode1"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml1"
        :defaultConfig="editorConfig"
        :mode="mode1"
        @onCreated="handleCreated1"
      />
    </div>

    <FirstTitle name="民族分布" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef2"
        :defaultConfig="toolbarConfig2"
        :mode="mode2"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml2"
        :defaultConfig="editorConfig"
        :mode="mode2"
        @onCreated="handleCreated2"
      />
    </div>
    <FirstTitle name="公路交通" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef3"
        :defaultConfig="toolbarConfig3"
        :mode="mode3"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml3"
        :defaultConfig="editorConfig"
        :mode="mode3"
        @onCreated="handleCreated3"
      />
    </div>
    <FirstTitle name="铁路交通" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef4"
        :defaultConfig="toolbarConfig4"
        :mode="mode4"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml4"
        :defaultConfig="editorConfig"
        :mode="mode4"
        @onCreated="handleCreated4"
      />
    </div>
    <FirstTitle name="水运交通" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef5"
        :defaultConfig="toolbarConfig5"
        :mode="mode5"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml5"
        :defaultConfig="editorConfig"
        :mode="mode5"
        @onCreated="handleCreated5"
      />
    </div>
    <FirstTitle name="航空运输" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef6"
        :defaultConfig="toolbarConfig6"
        :mode="mode6"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml6"
        :defaultConfig="editorConfig"
        :mode="mode6"
        @onCreated="handleCreated6"
      />
    </div>
    <FirstTitle name="社会环境利弊分析" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef7"
        :defaultConfig="toolbarConfig7"
        :mode="mode7"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml7"
        :defaultConfig="editorConfig"
        :mode="mode7"
        @onCreated="handleCreated7"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss">
.zddj {
  font-size: 14px;
}
</style>